<template>
  <div class="decoration-wrap">
    <svg :width="width" :height="height">
      <polyline
        :stroke="colors[0]"
        stroke-width="2"
        fill="transparent"
        :points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
      />

      <polyline
        :stroke="colors[0]"
        stroke-width="2"
        fill="transparent"
        :points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
      />

      <polyline
        :stroke="colors[1]"
        fill="transparent"
        stroke-width="3"
        :points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
      />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'HzxDecoration',
  props: {
    colors: {
      type: Array,
      default: () => (['#3f96a5', '#3f96a5'])
    },
    width: {
      type: Number,
      default: 250
    },
    height: {
      type: Number,
      default: 50
    },
    reverse: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    xPos(pos) {
      if (this.reverse) return pos
      return this.width - pos
    }
  }
}
</script>
<style lang="less" scoped="scoped">
    .decoration-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
        svg {
          transform-origin: left top;
        }
    }
</style>
